<template>
  <div class="shop-info" v-if="Object.keys(shop).length !== 0">
    <div class="info-top">
      <img :src="shop.logo" alt="" class="logo">
      <span class="shop-name">{{shop.name}}</span>
    </div>
    <div class="info-middle">
      <div class="info-middle-left">
        <div class="sells">
          <span class="count">{{shop.sells | sellCountFilter}}</span>
          <span class="desc">总销量</span>
        </div>
        <div class="goods">
          <span class="count">{{shop.goodCount}}</span>
          <span class="desc">全部宝贝</span>
        </div>
      </div>
      <div class="info-middle-right">
        <ul>
          <li v-for="(item, index) of shop.score" :key="index">
            <span>{{item.name}}</span>
            <span class="score" :class="{'better': item.isBetter}">{{item.score}}</span>
            <span class="level" :class="{'better': item.isBetter}">{{scoreLevel(item.isBetter)}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="info-door">
      <a :href="shop.shopUrl">
        <span>进店逛逛</span>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DetailShopInfo',
  props: {
    shop: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    scoreLevel() {
      return function(bool) {
        return bool ? '高' : '低'
      }
    }
  },
  filters: {
    sellCountFilter(sells) {
      if (sells > 10000) {
        sells = (sells / 10000).toFixed(1) + '万'
      }
      return sells
    }
  }
}
</script>
<style scoped>
  .shop-info {
    border-bottom: 5px solid #f2f5f8;
  }
  .info-top {
    display: flex;
    align-items: center;
    padding: 20px 10px;
  }
  .info-top .logo{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid #ccc;
  }
  .info-top .shop-name{
    font-size: 18px;
  }
  .info-middle,
  .info-middle .info-middle-left,
  .info-middle .info-middle-right{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info-middle > div{
    width: 50%;
  }
  .info-middle .info-middle-left {
    border-right: 1px solid #ccc;
  }
  .info-middle .info-middle-left .sells,
  .info-middle .info-middle-left .goods{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0 10px;
  }
  .info-middle .info-middle-left .count{
    font-size: 20px;
  }
  .info-middle .info-middle-left .desc{
    margin-top: 5px;
    font-size: 14px;
  }
  .info-middle .info-middle-right {
    display: flex;
    flex-direction: column;
  }
  .info-middle .info-middle-right ul{
    list-style: none;
  }
  .info-middle .info-middle-right ul li{
    padding: 4px 0;
  }
  .info-middle .info-middle-right ul li span{
    margin: 0 5px;
  }
  .info-middle .info-middle-right ul .score{
    font-size: 14px;
    color: green;
  }
  .info-middle .info-middle-right ul .score.better{
    color: red;
  }
  .info-middle .info-middle-right ul .level{
    font-size: 14px;
    float: right;
    background-color: green;
    color: #fff;
  }
  .info-middle .info-middle-right ul .level.better{
    background-color: red;
  }
  .info-door {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .info-door a{
    display: inline-block;
    background-color: rgb(240, 244, 249);
    padding: 5px 40px;
    border-radius: 8px;
    margin: 20px 0 30px;
  }
</style>